<template>
    <custom-page-box>
        <div class="container">
            <div class="top">
                <h4 class="mode-name">服务报价基本信息</h4>
                <a-button
                    type="primary"
                    @click="
                        () => {
                            $router.go(-1)
                        }
                    "
                >
                    返回
                </a-button>
            </div>
            <p>
                <span>您当前选择的是</span>
                <span>{{ info.serviceKind }}</span>
            </p>
            <p>
                <span>服务报价标题</span>
                <span>{{ info.title }}</span>
            </p>
            <div class="img-group">
                <span>服务报价封面</span>
                <div>
                    <img :src="$staticUrl + '/' + info.photo" alt="" @click="imgShow(info.photo)" />
                    <img :src="$staticUrl + '/' + info.slideshow" alt="" @click="imgShow(info.slideshow)" />
                </div>
            </div>
            <div class="img-group">
                <span>服务介绍视频</span>
                <div v-if="info.imgCoverUrl" class="imgcover" @click="previewVisible = true">
                    <img :src="$staticUrl + '/' + info.imgCoverUrl" alt="" />
                    <a-icon type="caret-right" title="播放视频" />
                </div>
            </div>
            <p>
                <span>服务报价</span>
                <span v-if="info.price">{{ info.price }}元{{ info.unit ? '/' + info.unit : '' }}</span>
                <span v-else>咨询获取报价</span>
            </p>
            <p>
                <span>服务报价标签</span>
                <span>{{ info.label }}</span>
            </p>
            <p>
                <span>服务报价详情</span>
                <span v-html="info.detail" class="detail" v-if="info.detail"></span>
            </p>
        </div>
        <a-modal
            class="videoModal"
            :visible="previewVisible"
            :footer="null"
            @cancel="handleCancel"
            width="40%"
            title="视频预览"
        >
            <video controls id="video">
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/mp4" />
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/ogg" />
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/webm" />
                <object :data="$staticUrl + '/' + info.videoUrl">
                    <embed :src="$staticUrl + '/' + info.videoUrl" />
                </object>
            </video>
        </a-modal>
    </custom-page-box>
</template>

<script>
export default {
    data () {
        return {
            info: {
                serviceKind: '',
                title: '',
                photo: '',
                slideshow: '',
                imgCoverUrl: '',
                videoUrl: '',
                price: '',
                unit: '',
                label: '',
                detail: ''
            },
            previewVisible: false
        }
    },
    async created () {
        const res = await this.$ApiServer['service/getInfo']({ id: this.$route.params.id })
        if (res.code === 200) {
            this.info = Object.assign({}, res.data)
        }
    },
    methods: {
        imgShow (url) {
            const urls = url.split(',')
            this.$picturesModal({ urls })
        },
        handleCancel () {
            const videoDom = document.querySelector('#video')
            videoDom.pause()
            this.previewVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 10px;
        border-radius: 4px;
        border-bottom: 1px solid #f3f3f3;
        h4 {
            font-size: 16px;
            font-weight: 400;
            line-height: 20px;
            color: #333;
        }
    }
    p,
    .img-group {
        display: flex;
        margin-top: 16px;
        padding: 0 18px;
        span:nth-child(1) {
            width: 120px;
            color: #999;
            font-size: 14px;
            & + span {
                color: #333;
                font-size: 14px;
                flex: 1;
            }
        }
        img {
            border-radius: 4px;
            & + img {
                margin-top: 8px;
            }
        }
        div:not(.imgcover) {
            display: flex;
            flex-direction: column;
        }
        .imgcover {
            width: 2rem;
            height: 1.4rem;
            position: relative;
            .anticon.anticon-caret-right {
                color: rgb(218, 218, 218);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 24px;
                cursor: pointer;
            }
        }
    }
    img {
        width: 2rem;
        height: 1.4rem;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid #d4d4d4;
        overflow: hidden;
    }
    .detail {
        max-width: 700px;
        border: 1px solid #d4d4d4;
        padding: 6px;
        border-radius: 4px;
    }
}
.videoModal {
    ::v-deep {
        #video {
            width: 100%;
            height: 400px;
        }
    }
}
</style>
